<template>
  <div class="p-2">
    <el-form
      :model="form"
      inline
      label-width="180"
      label-position="right"
      ref="formRef"
      :rules="rules"
    >
      <el-card>
        <template #header>
          <div class="card-header">
            <span>*基础信息(准确真实填写运营商基础信息)</span>
          </div>
        </template>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="运营商名称："
              required
              prop="name"
            >
              <el-input
                v-model="form.name"
                clearable
                placeholder="请输入运营商名称"
                @change="nameChange"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="统一社会信用代码："
              required
              prop="nsrSbh"
            >
              <el-input
                v-model="form.nsrSbh"
                clearable
                placeholder="请输入统一社会信用代码"
                @change="nsrSbhChange"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="运营商类型："
              required
              prop="dwType"
            >
              <el-select
                v-model="form.dwType"
                placeholder="请选择运营商类型"
                clearable
                filterable
                @change="agentType"
              >
                <el-option
                  v-for="(item,i) in agent_type"
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="法人姓名："
              required
              prop="fr"
            >
              <el-input
                v-model="form.fr"
                clearable
                placeholder="请输入法人姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="法人身份证号："
              required
              prop="frSfz"
            >
              <el-input
                v-model="form.frSfz"
                clearable
                placeholder="请输入法人身份证号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="法人手机号："
              required
              prop="frSjh"
            >
              <el-input
                v-model="form.frSjh"
                clearable
                placeholder="请输入法人手机号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="经办人姓名："
              required
              prop="wtr"
            >
              <el-input
                v-model="form.wtr"
                clearable
                placeholder="请输入经办人姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="经办人手机号："
              required
              prop="wtrSjh"
            >
              <el-input
                v-model="form.wtrSjh"
                clearable
                placeholder="请输入经办人手机号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="经办人身份证号："
              required
              prop="wtrSfz"
            >
              <el-input
                v-model="form.wtrSfz"
                clearable
                placeholder="请输入经办人身份证号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="经办人邮箱："
              required
              prop="wtrEmail"
            >
              <el-input
                v-model="form.wtrEmail"
                clearable
                placeholder="请输入经办人邮箱"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="区域："
              required
              prop="unitArea"
            >
              <el-cascader
                v-model="form.unitArea"
                :props="unitAreaNameOptions"
                @change="handleChangeAreaName"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="实际经营地址："
              required
              prop="address"
            >
              <el-input
                v-model="form.address"
                clearable
                placeholder="请输入实际经营地址"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>账户信息(结算账户主体名称必须跟运营商名称一致)</span>
          </div>
        </template>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="开户名："
              prop="khm"
            >
              <el-input
                v-model="form.khm"
                clearable
                disabled
                placeholder="请输入开户名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="开户银行："
              required
              prop="khh"
            >
              <el-select
                v-model="form.khh"
                placeholder="请选择开户银行"
                clearable
                filterable
              >
                <el-option
                  v-for="(item,i) in bank_list"
                  :label="item.label"
                  :value="item.label"
                  :key="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="开户支行："
              required
              prop="khd"
            >
              <el-input
                v-model="form.khd"
                clearable
                placeholder="格式：***银行***市***支行"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="联行号："
              required
              prop="khhNo"
            >
              <el-input
                v-model="form.khhNo"
                clearable
                placeholder="请输入联行号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="银行账号："
              required
              prop="bankCard"
            >
              <el-input
                v-model="form.bankCard"
                clearable
                placeholder="请输入银行账号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>*开票信息(录入企业开票信息)</span>
          </div>
        </template>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="发票抬头："
              required
              prop="invoceHeader"
            >
              <el-input
                v-model="form.invoceHeader"
                clearable
                disabled
                placeholder="请输入发票抬头"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="纳税人识别号："
              required
              prop="invoceCreditCode"
            >
              <el-input
                v-model="form.invoceCreditCode"
                clearable
                disabled
                placeholder="请输入纳税人识别号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="开户行："
              required
              prop="invoceBankName"
            >
              <el-input
                v-model="form.invoceBankName"
                clearable
                placeholder="格式：***银行***市***支行"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="银行账号："
              required
              prop="invoceBankCard"
            >
              <el-input
                v-model="form.invoceBankCard"
                clearable
                placeholder="请输入银行账号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="单位注册地址："
              required
              prop="invoceAddress"
            >
              <el-input
                v-model="form.invoceAddress"
                clearable
                placeholder="请输入单位注册地址"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="单位电话："
              required
              prop="invoceDwdh"
            >
              <el-input
                v-model="form.invoceDwdh"
                clearable
                placeholder="请输入单位电话"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>资质（运营商三证资质彩照或盖章复印件） [上传图片格式仅支持png/jpg,大小不得超过2M]</span>
          </div>
        </template>

        <el-row :gutter="20">
          <el-col :span="8" v-if="form.dwType == 1">
            <el-form-item
              label="营业执照："
              required

              prop="yyzz"
            >
              <imageUpload
                v-model="form.yyzz"
                modelKey="url"
                :limit="1"
                :isShowTip="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="form.dwType == 1">
            <el-form-item
              label="开户许可证："
              required
              prop="khxkz"
            >
              <imageUpload
                v-model="form.khxkz"
                modelKey="url"
                :limit="1"
                :isShowTip="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="法人身份证正面："
              required
              prop="frSfzzm"
            >
              <imageUpload
                v-model="form.frSfzzm"
                modelKey="url"
                :limit="1"
                :isShowTip="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="法人身份证反面："
              required
              prop="frSfzfm"
            >
              <imageUpload
                v-model="form.frSfzfm"
                modelKey="url"
                :limit="1"
                :isShowTip="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="经办人身份证正面："
              required
              prop="jbrSfzzm"
            >
              <imageUpload
                v-model="form.jbrSfzzm"
                modelKey="url"
                :limit="1"
                :isShowTip="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="经办人身份证反面："
              required
              prop="jbrSfzfm"
            >
              <imageUpload
                v-model="form.jbrSfzfm"
                modelKey="url"
                :limit="1"
                :isShowTip="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="form.dwType == 2">
            <el-form-item
              label="银行卡正面："
              required
              prop="bankZm"
            >
              <imageUpload
                v-model="form.bankZm"
                modelKey="url"
                :limit="1"
                :isShowTip="false"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="footer">
          <el-popconfirm
            title="确定放弃编辑？"
            @confirm="closeWin"
          >
            <template #reference>
              <el-button>取消</el-button>
            </template>
          </el-popconfirm>
          <el-button
            :loading="buttonLoading"
            type="primary"
            @click="submitForm"
          >确 定</el-button>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script setup name="addOrEditOperator" lang="ts">
import addEnterprise from '@/api/enterprise/addEnterprise';
import api from '@/api/operator/addOperator';
import { addOrEditForm } from '@/api/operator/addOperator/types';
import { areaVo } from '@/api/enterprise/addEnterprise/types';

const props = defineProps({
  operatorId: {
    type: String,
    default: ''
  }
});

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { agent_type, bank_list } = toRefs<any>(proxy?.useDict('agent_type', 'bank_list'));

const formRef = ref<ElFormInstance>();

const form = ref<addOrEditForm>({
  name: '',
  nsrSbh: '',
  dwType: '',
  fr: '',
  frSfz: '',
  frSjh: '',
  wtr: '',
  wtrSjh: '',
  wtrSfz: '',
  wtrEmail: '',
  unitArea: '',
  unitAreaName: '',
  address: '',
  khm: '',
  khh: '',
  khd: '',
  khhNo: '',
  bankCard: '',
  invoceHeader: '',
  invoceCreditCode: '',
  invoceBankName: '',
  invoceBankCard: '',
  invoceAddress: '',
  invoceDwdh: '',
  yyzz: '',
  khxkz: '',
  frSfzzm: '',
  frSfzfm: '',
  jbrSfzzm: '',
  jbrSfzfm: '',
  bankZm: '',
  alipayLogonId: ''
});

const rules = ref({
  name: [{ required: true, message: '请输入运营商名称', trigger: 'blur' }],
  nsrSbh: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
  dwType: [{ required: true, message: '请选择运营商类型', trigger: 'change' }],
  fr: [{ required: true, message: '请输入法人姓名', trigger: 'blur' }],
  frSfz: [{ required: true, message: '请输入法人身份证号', trigger: 'blur' }],
  frSjh: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的法人手机号', trigger: 'blur' }],
  wtr: [{ required: true, message: '请输入经办人姓名', trigger: 'blur' }],
  wtrSjh: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的经办人手机号', trigger: 'blur' }],
  wtrSfz: [{ required: true, message: '请输入经办人身份证号', trigger: 'blur' }],
  wtrEmail: [{ required: true, message: '请输入经办人邮箱', trigger: 'blur' }],
  unitArea: [{ required: true, message: '请选择区域', trigger: 'change' }],
  address: [{ required: true, message: '请输入实际经营地址', trigger: 'blur' }],
  khm: [{ required: true, message: '请输入开户名', trigger: 'blur' }],
  khh: [{ required: true, message: '请输入开户行', trigger: 'blur' }],
  khd: [{ required: true, message: '请输入开户支行', trigger: 'blur' }],
  khhNo: [{ required: true, message: '请输入联行号', trigger: 'blur' }],
  bankCard: [{ required: true, message: '请输入银行账号', trigger: 'blur' }],
  invoceHeader: [{ required: true, message: '请输入发票抬头', trigger: 'blur' }],
  invoceCreditCode: [{ required: true, message: '请输入发票纳税人识别号', trigger: 'blur' }],
  invoceBankName: [{ required: true, message: '请输入发票开户银行名称', trigger: 'blur' }],
  invoceBankCard: [{ required: true, message: '请输入发票开户银行账号', trigger: 'blur' }],
  invoceAddress: [{ required: true, message: '请输入发票单位注册地址', trigger: 'blur' }],
  invoceDwdh: [{ required: true, message: '请输入发票单位电话', trigger: 'blur' }],
  yyzz: [{ required: true, message: '请上传营业执照', trigger: 'change' }],
  khxkz: [{ required: true, message: '请上传开户许可证', trigger: 'change' }],
  frSfzzm: [{ required: true, message: '请上传法人身份证正面', trigger: 'change' }],
  frSfzfm: [{ required: true, message: '请上传法人身份证反面', trigger: 'change' }],
  jbrSfzzm: [{ required: true, message: '请上传经办人身份证正面', trigger: 'change' }],
  jbrSfzfm: [{ required: true, message: '请上传经办人身份证反面', trigger: 'change' }],
  bankZm: [{ required: true, message: '请上传银行卡正面', trigger: 'change' }]
});

const loading = ref(true);

const nameChange = (value: string) => {
  console.log(value);
  form.value.khm = value;
  form.value.invoceHeader = value;
};
const nsrSbhChange = (value: string) => {
  form.value.invoceCreditCode = value;
};

import type { CascaderProps, CascaderValue } from 'element-plus';
const unitAreaNameOptions: CascaderProps = {
  lazy: true,
  async lazyLoad(node, resolve) {
    const { level } = node;
    let nodes = [];
    var parentId = level == 0 ? 0 : node.data?.value;
    let res = await addEnterprise.areaQueryList(parentId);
    nodes = res.data.map((item: areaVo) => {
      return {
        value: item.areaId,
        label: item.areaName,
        leaf: item.level >= 2 ? true : false
      };
    });
    resolve(nodes);
  }
};

const closeWin = ()=>{
  const obj = { path: "/operator/addOperator" };
  proxy?.$tab.closeOpenPage(obj);
}

const areaList = ref([]);
const handleChangeAreaName = async (value: CascaderValue) => {
  if (!areaList.value.length) {
    let res = await addEnterprise.areaQueryList();
    areaList.value = res.data;
  }
  let arr: Array<string> = [];
  areaList.value.forEach((area: areaVo) => {
    (value as any).forEach((e: string | number) => {
      if (area.areaId == e) {
        arr.push(area.areaName);
      }
    });
  });
  form.value.unitAreaName = arr[0] + '/' + arr[1];
  console.log(form.value.unitArea);
  console.log(form.value.unitAreaName);
};

const khhChange = (value: any) => {
  console.log(value, bank_list);
  bank_list.value.forEach((e: any) => {
    if (e.value == value) {
      form.value.khh = e.label;
    }
  });
};
const route = useRoute();
/** 查询运营商信息 */
const getInfoData = async () => {
  loading.value = true;
  const res = await api.operatorDetail(props.operatorId);
  loading.value = false;
  form.value = res.data;
  form.value.dwType = res.data.dwType + '';
  form.value.khm = res.data.name;
  form.value.invoceHeader = res.data.name;
  form.value.invoceCreditCode = res.data.nsrSbh;
  if (form.value.unitArea) {
    let arr: any = form.value.unitArea ? form.value.unitArea?.split(',') : [];
    setTimeout(() => {
      arr = [parseInt(arr[0]), parseInt(arr[1])];
      form.value.unitArea = arr;
    }, 800);
  }
};

const agentType = (val:any)=>{


}
const buttonLoading = ref<boolean>(false);
const submitForm = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      let obj = {
        ...form.value,
        domain:location.origin,
        unitArea: form.value.unitArea?.toString()
      };
      buttonLoading.value = true;
      let res = await api.addOrEditOperator(obj, props.operatorId ? 'put' : 'post').finally(() => buttonLoading.value = false);
      console.log(res);
      buttonLoading.value = false;
      proxy?.$modal.msgSuccess(res.msg);
      proxy?.$router.go(-1);
      proxy?.$tab.closePage(route);
    }
  });
};
onMounted(() => {
  if (props.operatorId) {
    getInfoData(); // 查询运营商信息
  }
});
</script>

<style lang="scss" scoped>
.el-card {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
  .el-form-item {
    width: 100%;

    .el-select {
      width: 100%;
    }
  }
}
.footer {
  text-align: center;
  padding: 36px 0 16px;
}
:deep(.el-cascader) {
  width: 100%;
}
</style>
